<template>
  <div class="header">
    <!-- 顶部 -->
    <div class="top">
      <div class="w">
        <div class="left">
          <div class="logo" @click="goVideoShow"></div>
          <div class="countDown">倒计时：{{ countDown }}</div>
        </div>
        <div class="right">
          <div class="search">
            <el-input
              class="input"
              v-model.trim="input"
              placeholder="餐饮、娱乐、演出"
              @keyup.enter.native="toSearch"
            ></el-input>
          </div>
          <div class="login">
            <div class="headPortrait" v-if="userLogin">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <div class="popup">
                <div @click="toUser">个人中心</div>
                <div @click="exit">退出登录</div>
              </div>
            </div>
            <div class="toLogin" @click="toLogin" v-else>
              登录&nbsp;|&nbsp;注册
            </div>
          </div>
          <div class="Order" v-if="user.categary !== '商家'">
            <el-button @click="toOrder">订单管理</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav" @click="toTab">
      <div :class="{ fontColor: parsentPage === 'home' }">首页</div>
      <div :class="{ fontColor: parsentPage === 'shop' }">商家页</div>
      <div >
        <div v-if="navAreaShow" :class="{ fontColor: parsentPage === 'area' }">场地指引</div>
        <div v-else :class="{ fontColor: parsentPage === 'area' }">场地加盟</div>
      </div>
      <div :class="{ fontColor: parsentPage === 'cos' }" v-if="navAreaShow">cos报名</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      thePresentTime: new Date(),
      alreadyLoggedIn: false,
      input: "",
      navAreaShow: '',
      parsentPage: this.$route.name,
      videoShow:false
    };
  },
  methods: {
    goVideoShow(){
      this.$router.push("/videoshow")
    },
    exit(){
      this.$store.commit('EXITLOGIN')
      this.$router.push("/login")
    },
    getCountDown() {
      setInterval(() => {
        this.thePresentTime = new Date();
      }, 1000);
    },
    toHome() {
      this.$router.push("/home");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toUser() {
      this.$router.push("/user");
    },
    toTab(e) {
      if (
        e.target.innerHTML === "场地指引" ||
        e.target.innerHTML === "场地加盟"
      ) {
        this.$router.push("/area");
      } else if (e.target.innerHTML === "商家页") {
        this.$router.push("/shop");
      } else if (e.target.innerHTML === "首页") {
        this.$router.push("/home");
      } else if (e.target.innerHTML === "cos报名") {
        this.$router.push("/cos");
      } else {
        return;
      }
    },
    toOrder() {
      if (!this.userLogin) {
        this.$router.push("/login");
      } else {
        this.$router.push("/order");
      }
    },
    toSearch(e) {
      this.$router.push("/shop/"+e.target.value);
    },
  },
  computed: {
    countDown() {
      const startTime = new Date("2023-3-13 18:00:00");
      const times = (startTime - this.thePresentTime) / 1000;
      const days = parseInt(times / 60 / 60 / 24);
      const hours = parseInt((times / 60 / 60) % 24);
      const minutes = parseInt((times / 60) % 60);
      const seconds = parseInt(times % 60);
      return days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
    },
    ...mapState({
      user: (state) => state.user,
      userLogin: (state) => state.userLogin,
    }),
  },
  created() {
    this.getCountDown();
    this.navAreaShow = this.$store.state.user.categary ==="商家"?false:true 
    this.shops = this.$store.getters.excellentShop.slice(0, 8);
  },
  activated(){
    this.navAreaShow = this.$store.state.user.categary ==="商家"?false:true;
    this.shops = this.$store.getters.excellentShop.slice(0, 8);
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  // height: 75px;
  .w {
    width: 1100px;
    margin: 0 auto;
  }
  .top {
    min-width: 1100px;
    height: 75px;
    border-bottom: 1px solid rgb(216, 216, 216);
    // background-color:#ec5858 ;
    display: flex;
    justify-content: space-between;
    .left {
      float: left;
      .logo {
        float: left;
        width: 100px;
        height: 60px;
        margin-top: 5px;
        cursor: pointer;
        background: url("https://img.soogif.com/UxtLtma6amLEYWLpypj0jExeo7mOQeYP.JPEG") no-repeat center;
        background-size: 70%;
      }
      .countDown {
        float: left;
        line-height: 75px;
        height: 75px;
        font-size: 14px;
        margin-left: 30px;
        color: rgb(245, 35, 35);
        font-style: italic;
      }
    }
    .right {
      float: right;
      .search {
        float: left;
        height: 42px;
        margin-top: 15px;
        .input {
          height: 42px;
          width: 350px;
        }
      }
      .login {
        float: left;
        margin: 15px 20px;
        .headPortrait {
          position: relative;
          .popup {
            display: none;
            width: 100px;
            height: 60px;
            position: absolute;
            left: -25px;
            top: 42px;
            padding: 3px 3px;
            border-radius: 4px;
            // border: 1px solid #d4d0d0;
            box-shadow: 0px 0px 5px #a7a3a3;
            background-color: rgb(255, 255, 255);
            text-align: center;
            div {
              border-radius: 5px;
              width: 100px;
              height: 30px;
              line-height: 30px;
            }
            div:hover {
              cursor: pointer;
              background-color: #eceaea;
            }
          }
        }
        .headPortrait:hover .popup {
          display: block;
        }
        .toLogin {
          height: 42px;
          line-height: 42px;
          div {
            float: left;
          }
        }
        .toLogin:hover {
          color: rgb(198, 226, 255);
          cursor: pointer;
        }
      }
      .Order {
        float: left;
        margin-top: 15px;
      }
    }
  }
  .nav {
    display: flex;
    width: 800px;
    height: 40px;
    margin: 5px auto;
    // padding: ;
    // background-color: pink;
    text-align: center;
    padding: 10px;
    box-shadow: inset 5px 5px 20px #cfcbcb;
    border-radius: 4px;
    // border: 1px solid #cfcbcb;
    div {
      cursor: pointer;
      flex: 1;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      color: #cfcbcb;
    }
    .fontColor {
      color: rgb(33, 33, 33);
    }
  }
  .nav > div {
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: -5px -5px 13px #cfcbcb;
  }
}
</style>